<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>小疯子博客系统</title>

    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="/adminlte/plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/adminlte/dist/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
    <link rel="stylesheet" href="/bootstrap-table/bootstrap-table.css">

    <!-- jQuery -->
    <script src="/adminlte/plugins/jquery/jquery.min.js"></script>
    <!-- alert -->
    <script src="/js/alert.js"></script>
    <!-- Bootstrap 4 -->
    <script src="/adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- AdminLTE App -->
    <script src="/adminlte/dist/js/adminlte.min.js"></script>
    <script src="/bootstrap-table/bootstrap-table.js"></script>
    <script src="/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>

</head>
<body>
<div class="wrapper">
    <div id="updateDiv" style="display: none">
        <input id="alert" type="button" value="Alert" />
        <input id="confirm" type="button" value="Confirm" />
    </div>
    <!-- head view -->
    <#include "/common/head.ftl" />
    <!-- left view -->
    <#include "/common/left.ftl" />
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel"></h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body">
                    <form id="rolefm">
                        <input id="id" name="id" hidden/>
                        <div class="form-group">
                            <label class="col-sm-2">角色</label>
                            <div class="rolelist"></div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="tiedRole" type="button" class="btn btn-primary">提交更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">用户审核</h1>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <table id="table" style="background-color: ActiveBorder"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Main Footer -->
    <#include "/common/foot.ftl" />
</div>
</body>
<script>
    let $table;
    function initMainTable() {
        $table = $('#table').bootstrapTable({
            url: "/user/review/select",         //请求后台的URL（*）
            method: "GET",                      //请求方式（*）
            toolbar: "#toolbar",
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: true,                     //是否启用排序
            sortOrder: "desc",                   //排序方式
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
            pageSize: 10,                     //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            search: true,                      //是否显示表格搜索
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列（选择显示的列）
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            showToggle: false,                   //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                  //是否显示父子表
            //得到查询的参数
            queryParams: function (params) {
                //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
                var temp = {
                    rows: params.limit,                         //页面大小
                    page: (params.offset / params.limit) + 1,   //页码
                    search: params.search
                };
                return temp;
            },
            columns: [
                {
                    field: 'id',
                    title: '用户ID',
                    sortable: false,
                    align: 'center',
                    width: 120
                }, {
                    field: 'userName',
                    title: '用户名',
                    sortable: false,
                    align: 'center',
                    width: 180
                }, {
                    field: 'nickName',
                    title: '昵称',
                    sortable: false,
                    align: 'center',
                    width: 180
                }, {
                    field: 'locked',
                    title: '锁状态',
                    sortable: false,
                    align: 'center',
                    width: 150,
                    formatter: function(value,row,index){
                        if(value==0){
                            return "未锁";
                        }else if(value==1) {
                            return "上锁";
                        }else {
                            return "未知";
                        }
                    }
                }, {
                    field: 'opt',
                    title: '操作',
                    sortable: false,
                    align: 'center',
                    formatter:function(value,row,index){
                        let e = '<button style="margin-right:5px" type="button" class="btn btn-primary" onclick="lock(\''+ row.id +'\')">上锁</button>';
                        let f = '<button style="margin-right:5px" type="button" class="btn btn-primary" onclick="unlock(\''+ row.id +'\')">解锁</button>';
                        let g = '<button style="margin-right:5px" type="button" class="btn btn-primary" onclick="tiedRole(\''+ row.id +'\')">绑角色</button>';
                        return e+f+g;
                    }
                }
            ],
            responseHandler: function (result) {
                if(result.status==1){
                    return {
                        "total": result.data.total,
                        "rows": result.data.records
                    };
                }
            },
            onLoadSuccess: function (data) {
            },
            onLoadError: function () {
            },
            onDblClickRow: function (row, $element) {
                // var id = row.ID;
                // EditViewById(id, 'view');
            }
        })
    }
    initMainTable();

    //切换到当前页面的事件
    window.onfocus = function(){
        //刷新表单
        $("#table").bootstrapTable('refresh');
    }

    //授权角色
    function tiedRole(id) {
        $.ajax({
            type: "get",
            url: "/user/review/allRole",
            data: {
                userId: id
            },
            success: function(result){
                if (result.status === 1) {
                    $("#id").val(id);
                    let rolelistHtml = "";
                    result.data.forEach(function(d) {
                        if(d.checked){
                            rolelistHtml += '<input style=\"margin-right: 3px;margin-left: 5px\" type=\"checkbox\" name=\"roleId\" checked value=\"'+d.roleId+'\">'+d.roleName;
                        }else{
                            rolelistHtml += '<input style=\"margin-right: 3px;margin-left: 5px\" type=\"checkbox\" name=\"roleId\" value=\"'+d.roleId+'\">'+d.roleName;
                        }
                    })
                    $(".rolelist").html(rolelistHtml)
                    $("#myModal").modal('show');
                } else {
                    myAlert("操作失败", result.message);
                }
            }
        })
    }

    //绑角色
    $("#tiedRole").bind("click", function(){
        let roles = new Array();
        $.each($("input[name='roleId']:checked"),function(e){
            roles.push($(this).val());
        });
        let userId = $("#id").val();
        $.ajax({
            type: "post",
            url: "/user/review/tiedRole",
            data: {
                roles: roles,
                userId: userId
            },
            success: function(result){
                if (result.status === 1) {
                    myAlert("提示", "操作成功", function() {
                        $("#myModal").modal('hide');
                    });
                } else {
                    myAlert("操作失败", result.message);
                }
            }
        })
    })

    //上锁
    function lock(id) {
        $.ajax({
            type: "GET",
            url:"/user/review/lock",
            data:{
                id: id
            },
            error: function(request) {
                myAlert('系统提示', "Connection error");
            },
            success: function(data) {
                if(data.status==1){
                    myAlert('系统提示',data.message,function() {
                        $("#table").bootstrapTable('refresh');
                    });
                }else{
                    myAlert('系统提示',data.message);
                }
            }
        })
    }
    //解锁
    function unlock(id) {
        $.ajax({
            type: "GET",
            url:"/user/review/unlock",
            data:{
                id: id
            },
            error: function(request) {
                myAlert('系统提示', "Connection error");
            },
            success: function(data) {
                if(data.status==1){
                    myAlert('系统提示',data.message,function() {
                        $("#table").bootstrapTable('refresh');
                    });
                }else{
                    myAlert('系统提示',data.message);
                }
            }
        })
    }
</script>
</html>
